<template>
    <div class="level">
        
        <div class="level-header" v-if='levelTitle'>
            <h1 class="title">
                {{levelTitle}}
            </h1>
        </div>

        <div class="level-content">
            <slot>

            </slot>
        </div>
        
    </div>
</template>

<script lang='ts'>
import {Component, Vue, Prop} from 'vue-property-decorator';


interface IMore{
    path: string
    label: string
}

@Component
export default class Topbar extends Vue{

    @Prop()
    levelTitle?: string

    @Prop()
    more?:IMore
    
}


</script>

<style scoped lang='less'>

.level{
    margin-top: 60*@rem;

}

.level-header{
    position: relative;
    border-bottom: 4*@rem solid #008ed6;

    
    .title{
        display: inline-block;
        padding-bottom: 6*@rem;
        font-size: @fontSizeLg;
        color: #008ed6;
        
    }

    .sub-info{
        position: absolute;
        bottom: 0;
        right: 0;
        
        padding: 0 20*@rem;

    }
    
}

.level-content{
    .shadowBlock();
    padding: 20*@rem;
    background: @bgColor;
}

</style>